<template>
	<div class="login-container" @keyup.enter.native="handleLogin">
		<div class="login-weaper animated bounceInDown">
			<div class="login-left">
				<div class="login-time">
					欢迎使用
				</div>
				<img class="img" src="@/assets/avatar.png" alt="">
				<p class="title">贸易平台后台登录</p>
			</div>
			<div class="login-border">
				<div class="login-main">
					<h4 class="login-title">
						登录 贸易平台
					</h4>
					<el-form ref="loginForm" :rules="loginRules" :model="loginForm" class="login-form" status-icon
					         label-width="0">
						<el-input v-model="loginForm.loginName" placeholder="请输入登录名" size="small" auto-complete="off"
						          @keyup.enter.native="handleLogin">
							<i slot="prefix" class="el-icon-user"/>
						</el-input>
						<el-input v-model="loginForm.password" placeholder="请输入密码" size="small" auto-complete="off"
						          @keyup.enter.native="handleLogin">
							<i slot="prefix" class="el-icon-lock"/>
						</el-input>
						<el-button type="primary" size="small" class="login-submit" @click.native.prevent="handleLogin">
							登录
						</el-button>
					</el-form>
					<div class="login-menu">
						<a href="#" @click.stop="activeName='user'">海氏威</a>
						<a href="#" @click.stop="activeName='code'">客服</a>
						<a href="#" @click.stop="activeName='third'">Test</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		sendMsg
	} from '@/api/login'

	export default {
		name: 'Login',
		data() {
			return {
				loginForm: {
					loginName: 'admin',
					password: '123123'
				},
				loginRules: {
					loginName: [{
						required: true,
						trigger: 'blur',
						message: '账号不能为空'
					}],
					password: [{
						required: true,
						trigger: 'blur',
						message: '密码不能为空'
					}]
				},
				loading: false,
				verifyLoading: false,
				show: true,
				count: '',
				timer: null
			}
		},
		watch: {
			$route: {
				handler: function (route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		created() {
			// window.addEventListener('hashchange', this.afterQRScan)
		},
		destroyed() {
			// window.removeEventListener('hashchange', this.afterQRScan)
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid && !this.loading) {
						this.loading = true
						this.$store.dispatch('loginByName', this.loginForm).then(() => {
							this.loading = false
							this.$router.push({
								path: this.redirect || '/'
							})
						}).catch(res => {
							this.$notify.error({
								title: '失败',
								message: res.message
							})
							this.loading = false
						})
					} else {
						return false
					}
				})
			}
		}
	}
</script>
<style>
	.msg-text {
		display: block;
		width: 60px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
	}

	.msg-text.display {
		color: #ccc;
	}
</style>
<style lang="scss">
	@import "../../styles/login.scss";
</style>
